<template>
  <div>
    <div class="button-bar" :style="{'background': content.propMap.backgroundColor, 
      'padding':content.propMap.verticalMargin+'px 0', 'margin': '0 ' + content.propMap.horizontalMargin + 'px', 'border-radius': content.propMap.radius + 'px'}">
          <!-- 图片按钮、文字按钮，固定不可滚动 -->
          <div
            v-if="(content.length < content.propMap.rowNum * content.propMap.pageNum) || content.length === content.propMap.rowNum * content.propMap.pageNum"
            :class="content.propMap.templateStyle === '10' ? 'pad-t-5' : ''">
            <ul v-for="(pitem,pindex) of content.buttonGroupList" class="button-ul"
                :key="pindex" style="display:flex; justify-content: flex-start;flex-wrap: wrap;">
              <li v-for="(sitem,sindex) of pitem" :key="sindex" class="single-page" :class="'single-txt single-page-' + content.propMap.templateStyle">
                <div v-for="(val,vindex) of sitem" :key="vindex" :style="[{flex: (1/content.propMap.rowNum)}]" @click.stop="linkTo(val)">
                  <div style="position:relative">
                    <button v-if="val.linkType === '1012' && enterpriseCustomerServiceAuthority === 1" :send-message-title="memberInfo.nickname + '的V客主页'" 
                    plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
                    send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
                    :session-from="'7moor|'+ customerInfo.nickname + '|' + customerInfo.avatar +'|'+ customField"></button>
                    <img v-if="val.imgUrl && content.propMap.templateStyle === '10'" class="width-48 height-48" :class="'btns-radius-' + content.propMap.buttonStyle" :src="val.imgUrl + '?imageView2/2/w/100'" alt="">
                  </div>
                  <div class="pad-t-3 pad-b-3" :style="{'color': content.propMap.fontColor}">
                    {{ val.buttonName }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!-- 滚动选择 -->
          <div v-else>
            <!-- 图片按钮滚动开始 -->
            <div v-if="content.propMap.templateStyle === '10'" class="pad-t-5">
              <swiper class="button-swiper"
                :style="{height:content.propMap.pageNum === '1'? '140rpx' : '304rpx'}" >
                <swiper-item v-for="(swiperitem,itemindex) of content.buttonGroupList" :key="itemindex" circular="true">
                  <ul v-for="(rowitem,rowindex) of swiperitem" :key="rowindex" class="button-ul" style="display:flex; justify-content: flex-start;flex-wrap: wrap;">
                    <li v-for="(singleitem,singleindex) of rowitem" :key="singleindex" :style="[{flex: (1/content.propMap.rowNum)}]" class="double-page" @click.stop="linkTo(singleitem)">
                      <div style="position:relative">
                        <button v-if="singleitem.linkType === '1012'" :send-message-title="memberInfo.nickname + '的V客主页'" 
                          plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
                          send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
                          :session-from="'7moor|'+ memberInfo.nickname + '|' + memberInfo.avatar +'|'+ customField"></button>
                        <img class="width-48 height-48" v-if="singleitem.imgUrl && content.propMap.templateStyle === '10'" :class="'btns-radius-' + content.propMap.buttonStyle" :src="singleitem.imgUrl + '?imageView2/2/w/100'" alt="">
                      </div>
                      <div class="pad-t-3 pad-b-3" :style="{'color': content.propMap.fontColor}">
                        {{ singleitem.buttonName }}
                      </div>
                    </li>
                  </ul>
                </swiper-item>
              </swiper>
            </div>
            <!-- 图片按钮滚动结束 -->
            <!-- 文字按钮滚动开始 -->
            <swiper class="button-swiper" 
              v-else
              :style="{height:content.propMap.pageNum === '1'? '50rpx' : '146rpx'}" >
              <swiper-item v-for="(swiperitem,itemindex) of content.buttonGroupList" :key="itemindex" circular="true">
                <ul v-for="(rowitem,rowindex) of swiperitem" :key="rowindex" class="button-ul" style="display:flex; justify-content: flex-start;flex-wrap: wrap;">
                  <li v-for="(singleitem,singleindex) of rowitem" :key="singleindex" :style="[{flex: (1/content.propMap.rowNum)}]" class="double-page" @click.stop="linkTo(singleitem)">
                    <div style="position:relative">
                      <button v-if="singleitem.linkType === '1002'" :send-message-title="memberInfo.nickname + '的V客主页'" 
                        plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
                        send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"></button>
                      <img class="width-48 height-48" v-if="singleitem.imgUrl && content.propMap.templateStyle === '10'" :class="'btns-radius-' + content.propMap.buttonStyle" :src="singleitem.imgUrl + '?imageView2/2/w/100'" alt="">
                    </div>
                    <div class="pad-t-3 pad-b-3" :style="{'color': content.propMap.fontColor}">
                      {{ singleitem.buttonName }}
                    </div>
                  </li>
                </ul>
              </swiper-item>
            </swiper>
            <!-- 文字按钮滚动结束 -->
          </div>
      </div>
  </div>
</template>
<script>
export default {
  name: 'componentButtons',
  props: {
    // 按钮组数据
    content: {
      type: Object,
      default: function() {
        return {}
      }
    },
    customerInfo: {
      type: Object,
      default: function() {
        return {}
      }
    },
    memberInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  methods: {
    linkTo(item) {
      this.$emit('linkTo', item)
    }
  }
}
</script>
<style lang="less" scoped>
// 按钮组样式
.button-bar {
  font-size: 24rpx;
  .btns-radius-10 {
    border-radius: 50%;
  }
  .btns-radius-11 {
    border-radius: 10px;
  }
  .button-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    .shape-type-10 {
      border-radius: 50%;
    }
    .shape-type-11 {
      border-radius: 10px;
    }
  }
  .button-type-3 {
    justify-content: space-around;
  }
  .button-swiper {
    .double-page {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }    
  }
  .button-ul{
    .single-page{
      &:nth-child(2){
        margin-top: 10px;
      }
    }
    .single-txt.single-page-11{
      &:nth-child(2){
        margin-top: 0px;
      }
    }
  }
  .single-page {
    display: flex;
    width: 100%;
    & > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  ul:nth-child(2) {
    margin-top: 20rpx;
  }
}
.button-bar-1{
  display: flex;
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  .button-text{
    flex-shrink: 0;
    text-align: center;
  }
}
</style>
